<template>
  <a-config-provider>
    <div v-show="isShow"
         ref="searchContainer"
         class="search-condition-container">
      <component class='search-condition-item'
                 v-for="(item, index) in conditions"
                 :key="index"
                 :ref="item.key"
                 :is="getComponentByType(item.type, item)"
                 :attr="item"
                 :style="getConditionColStyle()"
                 :value="selectedConditionsObj[item.key]"
                 @valueChange="onConditionValueChange">
      </component>
    </div>
  </a-config-provider>
</template>

<script>
  import SCInput from './widgets/sc-input.vue';
  import SCSelect from './widgets/sc-select.vue';
  import SCRangeDate from './widgets/sc-range-date.vue';
  import SCRadio from './widgets/sc-radio.vue';
  import SCCheckbox from './widgets/sc-checkbox.vue';
  import SCMultipleSelect from './widgets/sc-multiple-select.vue';
  // import SCSelectTemplate from './widgets/sc-select-template';
  import SCTreeSelect from './widgets/sc-tree-select';
  import SCSelectOrg from './widgets/sc-select-org';
  import SCSelectWorkFlowTemplate from './widgets/se-select-workflow-template';
  import SCSelectMemberWithDisabled from './widgets/sc-select-member-with-disabled.vue';
  import SCSelectWorkflowTemplateRadio from './widgets/sc-select-workflow-template-radio.vue';

  export default {
    props: {
      conditions: {
        type: Array,
        default: () => []
      },
      selectedConditions: {
        type: Array,
        default: () => []
      }
    },
    data() {
      const selectedConditionsObj = this.getSelectedConditionsObj();

      return {
        isShow: false,
        selectedConditionsObj: selectedConditionsObj,
        colNumber: 3 // 每行显示的筛选条件数量
      };
    },
    created() {
      this.handleResizeTimer = null;
      this.colConfig = [
        {
          small: null,
          big: 1024,
          col: 3
        },
        {
          small: 1024,
          big: 1280,
          col: 3
        },
        {
          small: 1280,
          big: 1680,
          col: 4
        },
        {
          small: 1680,
          big: 1920,
          col: 5
        },
        {
          small: 1920,
          big: 2560,
          col: 6
        },
        {
          small: 2560,
          big: 3840,
          col: 8
        },
        {
          small: 3840,
          big: null,
          col: 8
        }
      ];
    },
    mounted() {
      window.addEventListener('resize', this.handleResize);
      this.initColNumber();
    },

    watch: {
      selectedConditions: {
        handler(newVal, oldVal) {
          console.log('---- selectedConditions -----', newVal);
          const selectedConditionsObj = this.getSelectedConditionsObj(newVal);
          this.selectedConditionsObj = selectedConditionsObj;
        },
        deep: true
      },
      isShow: {
        handler(newVal, oldVal) {
          if (newVal === true) {
            this.$nextTick(() => {
              this.initColNumber();
            });
          }
        }
      }
    },

    methods: {
      initColNumber() {
        const container = this.$refs.searchContainer;
        if (container) {
          const width = container.clientWidth;
          this.colConfig.some((item) => {
            if (
              ((item.small && item.small < width) || !item) &&
              ((item.big && item.big >= width) || !item.big)
            ) {
              this.colNumber = item.col;
              return true;
            } else {
              return false;
            }
          });
        }
      },
      getConditionColStyle() {
        return { width: `${100 / this.colNumber}%` };
      },
      getComponentByType(type, item) {
        const componentMap = {
          INPUT: SCInput, // 输入控件
          SELECT: SCSelect, // 下拉单选控件
          SELECT_MULTI: SCMultipleSelect, // 下拉多选控件
          DATE_MULTI: SCRangeDate, // 范围日期控件
          RADIO: SCRadio, // 单选按钮控件
          CHECKBOX: SCCheckbox, // 多选按钮控件
          SHUTTLE_FRAME: SCTreeSelect, //选模板组件、选部门/人员组件
          SELECT_ORG: SCSelectOrg, // 发起对象
          SELECT_WORKFLOW_TEMPLATE: SCSelectWorkFlowTemplate, // 流程模板
          SELECT_MEMBER_WITH_DISABLED: SCSelectMemberWithDisabled, // 选人（可选停用人员）控件
          SELECT_WORKFLOW_TEMPLATE_RADIO: SCSelectWorkflowTemplateRadio // 可以选流程模板的单选控件
        };
        if (type == 'SELECT_ORG' && item.extra && item.extra.subType) {
          type = item.extra.subType;
        }
        return componentMap[type] ? componentMap[type] : componentMap.INPUT;
      },
      getSelectedConditionsObj() {
        const selectedConditionsObj = {};
        for (let i = 0; i < this.selectedConditions.length; ++i) {
          const item = this.selectedConditions[i];
          selectedConditionsObj[item.key] = item.value;
        }

        return selectedConditionsObj;
      },
      onConditionValueChange(data) {
        console.log('search-condition onConditionValueChange 未实现！');
      },
      getFormatValueByConditionKey(key) {
        const refElement = this.$refs[key][0];
        if (refElement && refElement.getFormatValue) {
          return refElement.getFormatValue();
        } else {
          return null;
        }
      },
      handleResize() {
        if (this.handleResizeTimer) {
          clearTimeout(this.handleResizeTimer);
        }
        this.handleResizeTimer = setTimeout(() => {
          this.handleResizeTimer = null;
          this.initColNumber();
        }, 300);
      }
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.handleResize);
    }
  };
</script>
<style scoped>
  .search-condition-container {
    display: flex;
    flex-wrap: wrap;
    padding: 0px 0px 0px 0px;
    background-color: #ffffff;
  }

  .search-condition-item {
    display: flex;
    flex: 0 0 auto;
    line-height: 30px;
    padding: 12px 12px 0px 0px;
  }
</style>

<style>
  .search-condition-item-label {
    flex: 0 0 auto;
    width: 84px;
    margin-right: 8px;
    text-align: right;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .search-condition-item-widget {
    flex: 1;
    overflow: hidden;
    height: 30px;
    line-height: 30px;
  }
</style>
